<template>
  <view>
    <view class="familyNameEdit flex flex-column align-center pageHeight bg_F5F5F5 wh_750">
      <s-header-title ref="headerTitle" isDisplayBack title="修改家庭名称" is-fixed background="#f5f5f5"
                      @getPageHeight="getPageHeight"></s-header-title>
      <view :style="{height:`${page.headerHeight}px`}"></view>
      <view class="hW_25"></view>
      <view class="inputName flex align-center justify-center">
        <input v-model="family.familyName" placeholder="请输入家庭名称" placeholder-class="inputName_placeholder"
               @input="nameInput"></input>
      </view>
      <view class="hW_16"></view>
      <view class="tips">
        提示：不超过12个中文字符
      </view>
      <view class="hW_89"></view>
      <button class="confirm flex align-center justify-center" @click.stop="confirmName">
        完成
      </button>
    </view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/familyPage/components/headerTitle.vue';
  import { reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const page = reactive({
    headerHeight: 0,
    options: {},
  });

  const family = reactive({
    familyName: '',
    familyInfo: {},
  });

  onLoad((options) => {
    page.options = options;
    family.familyInfo = JSON.parse(uni.getStorageSync('familyInfo'));
    family.familyName = JSON.parse(uni.getStorageSync('familyInfo')).name;
    uni.removeStorageSync('familyInfo');
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function nameInput(e) {
    if (e.detail.value.length > 12) {
      family.familyName = e.detail.value.substring(0, 12);
    }
  }

  async function confirmName() {
    if (!family.familyName) {
      uni.showToast({
        title: '家庭名称尚未填写',
        icon: 'none',
      });
      return;
    }
    const { code, msg } = await sheep.$api.family.updateFamilyName({
      family_id: family.familyInfo.id,
      name: family.familyName,
    });
    if (code == 1) {
      uni.$emit('setFamilyName', family.familyName);
      uni.navigateBack();
    } else {
      sheep.$helper.toast(msg);
    }

  }
</script>


<style scoped lang="scss">
  .familyNameEdit {

    .inputName {
      width: 702rpx;
      height: 80rpx;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
      padding: 0 20rpx;

      input {
        width: 662rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #4B4B4B;
        text-align: center;
      }
    }

    .inputName_placeholder {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
      text-align: center;
    }

    .tips {
      width: 660rpx;
      height: 40rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }

    .confirm {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 41rpx 41rpx 41rpx 41rpx;
      border: none;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
</style>
